<template>
  <div class="container">
    <canvas id="canvasId" style="background-color: black"></canvas>
  </div>
</template>

<script>
import { Model } from "@luma.gl/engine";
import { Buffer, clear } from "@luma.gl/webgl";
import { createGLContext, instrumentGLContext } from "@luma.gl/gltools";

import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl"; // or "const mapboxgl = require('mapbox-gl');"
export default {
  name: "Vue2MapboxMapboxLumagl",
  data() {
    return {};
  },

  mounted() {
    // window.addEventListener("resize", this.resizeCanvas);

    // const INFO_HTML = `
    // Have to start somewhere...
    // `;

    // class AppAnimationLoop extends AnimationLoop {
    //   constructor() {
    //     super({debug: true});
    //   }

    //   static getInfo() {
    //     return INFO_HTML;
    //   }

    //   onInitialize({gl}) {
    //     const positionBuffer = new Buffer(gl, new Float32Array([-0.5, -0.5, 0.5, -0.5, 0.0, 0.5]));

    //     const colorBuffer = new Buffer(
    //       gl,
    //       new Float32Array([1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0])
    //     );

    //     const vs = `
    //       attribute vec2 position;
    //       attribute vec3 color;

    //       varying vec3 vColor;

    //       void main() {
    //         vColor = color;
    //         gl_Position = vec4(position, 0.0, 1.0);
    //       }
    //     `;

    //     const fs = `
    //       varying vec3 vColor;

    //       void main() {
    //         gl_FragColor = vec4(vColor, 1.0);
    //       }
    //     `;

    //     const model = new Model(gl, {
    //       vs,
    //       fs,
    //       attributes: {
    //         position: positionBuffer,
    //         color: colorBuffer
    //       },
    //       vertexCount: 3
    //     });

    //     return {model};
    //   }

    //   onRender({gl, model}) {
    //     clear(gl, {color: [0, 0, 0, 1]});
    //     model.draw();
    //   }

    //   onFinalize({model}) {
    //     model.delete();
    //   }
    // }

    // /* global window */
    // if (typeof window !== 'undefined' && !window.website) {
    //   // const animationLoop = new AppAnimationLoop();
    //   // animationLoop.start();
    // }

    this.initMap();
  },

  methods: {
    initMap() {
      // const canvas = document.getElementById("canvasId");
      // this.gl = canvas.getContext("webgl");
      // instrumentGLContext(this.gl);

      const gl = createGLContext({
        // webgl2: false,
        // webgl1: true,
        webgl2: true,
        webgl1: false,
        throwOnError: false,
        canvas: "canvasId",
      });

      // console.log(this.gl);//webgl1: true,

      const positionBuffer = new Buffer(
        gl,
        new Float32Array([
          -0.5, -0.5,
          0.5, -0.5,
          0.0, 0.5,
          0.5, 0.5
        ])
      );

      const colorBuffer = new Buffer(
        gl,
        new Float32Array([
          1.0, 0.0, 0.0,
          0.0, 1.0, 0.0, 
          0.0, 0.0, 1.0, 
          1.0, 1.0, 0.0,
        ])
      );

      const vs = `
        attribute vec2 position;
        attribute vec3 color;

        varying vec3 vColor;

        void main() {
          vColor = color;
          gl_Position = vec4(position, 0.0, 1.0);
        }
      `;

      const fs = `
        varying vec3 vColor;

        void main() {
          gl_FragColor = vec4(vColor, 1.0);
        }
      `;

      const model = new Model(gl, {
        vs,
        fs,
        attributes: {
          position: positionBuffer,
          color: colorBuffer,
        },
        drawMode: gl.TRIANGLE_STRIP,
        // vertexCount: 3,
        vertexCount: 4,
      });

      // 清除画布，并绘制
      clear(gl, { color: [0, 0, 0, 1] });
      model.draw();
    },
    resizeCanvas() {
      const canvas = document.getElementById("canvas");
      const container = canvas.parentNode;
      const displayWidth = container.clientWidth;
      const displayHeight = container.clientHeight;
      if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
        canvas.width = displayWidth;
        canvas.height = displayHeight;
        // this.gl.viewport(0, 0, displayWidth, displayHeight);
      }
    },
  },
};
</script>

<style>
canvas {
  box-sizing: border-box;
  /* overflow: hidden !important;; */
  /* overflow-clip-margin: border-box; */
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>
